<template>
	<view class="container">
		<view class="header-box">
			<view :style="{ height: height + 'px' }"> </view>
			<view class="avatar-box">
				<view class="header-t">
					<view class="avatar-img">
						<img :src="
                avatarUrl
                  ? avatarUrl
                  : 'https://picx.zhimg.com/v2-8d117f237079440cc59baf9ca762d29f_r.jpg?source=1940ef5c'
              " alt="" />
					</view>

					<view class="avatar-name" v-if="avatarUrl">{{ nickName }}</view>
					<div class="text-box" v-else>
						<div @click="wxInfoClick" style="
									border: 1px solid #fff;
									color: #fff;
									padding: 10rpx 20rpx;
									border-radius: 30rpx;
								  ">
							请完善信息
						</div>
					</div>
				</view>
			</view>
			<!-- <view class="header-list">
				<view class="header-item">
					<view>893</view>
					<view>积分</view>
				</view>
				<view class="header-item" @click="couponClick">
					<view>893</view>
					<view>卡券</view>
				</view>
				<view class="header-item" @click="CollectLink">
					<view>893</view>
					<view>收藏</view>
				</view>
			</view> -->
		</view>
		<view class="header-box-bottom">
			<view class="content-bottom-list">
				<view class="content-bottom-item">
					<view>
						<img :src="baseURL + '/static/center/icon-center-hy.png'" alt="" />
					</view>
					<view> 我的会员 </view>
				</view>
				<!-- <view class="content-bottom-item" @click="CollectLink">
					<view>
						<img :src="baseURL + '/static/center/icon-center-hy.png'" alt="" />
					</view>
					<view> 我的收藏 </view>
				</view> -->
				<view class="content-bottom-item" @click="orderClick">
					<view>
						<img :src="baseURL + '/static/center/icon-center-dd.png'" alt="" />
					</view>
					<view> 我的订单 </view>
				</view>
				<view class="content-bottom-item" @click="informationRegistrationClick">
					<view>
						<img :src="baseURL + '/static/center/icon-center-dj.png'" alt="" />
					</view>
					<view> 信息登记 </view>
				</view>
				<view class="content-bottom-item">
					<view>
						<img :src="baseURL + '/static/center/icon-center-sjtb.png'" alt=""
							@click='synchronizationClick' />
					</view>
					<view> 数据同步 </view>
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell :icon="baseURL + '/static/center/icon-center-wdda.png'" @click="archivalRecordClick" :isLink="true"
				title="档案记录"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-wdda.png'" @click="appointmentRecordClick"
				:isLink="true" title="预约记录"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-wdys.png'" @click="PhysicianManagementClick"
				:isLink="true" title="我的医生"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-wdys.png'" @click="CollectLink" :isLink="true"
				title="我的收藏"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-grxx.png'" @click="informationClick" :isLink="true"
				title="个人信息"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-yqhy.png'" :isLink="true" title="邀请好友"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-wtfk.png'" :isLink="true" @click="ProblemFeedbackClick"
				title="问题反馈"></u-cell>
			<u-cell :icon="baseURL + '/static/center/icon-center-rxdh.png'" :isLink="true" @click='hotPhoto'
				title="热线电话"></u-cell>
		</u-cell-group>
		<u-modal :show="show" title="数据同步" showCancelButton @confirm='confirmClick' @cancel="cancelClick">
			<div>
				<view style='margin-bottom:20rpx'><u--input placeholder="日照香炉生紫烟" v-model="model.phone"></u--input>
				</view>
				<u-input v-model="model.captcha">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="30" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</div>
		</u-modal>
	</view>
</template>
<script>
	import {
		sendSynchroSms,
		synchroData,
	} from '@/api/axios/center.js'
	export default {
		props: {
			height: {
				type: Number,
				require: true,
			},
		},
		data() {
			return {
				avatarUrl: "",
				nickName: "",
				openId: '',
				baseURL: this.staticURL,
				show: false,
				tips: '',
				model: {
					phone: '',
					captcha: '',
				},
				captcha: ''
			};
		},
		onReady() {
			this.avatarUrl = uni.getStorageSync("avatarUrl");
			this.nickName = uni.getStorageSync("nickName");
			this.openId = uni.getStorageSync("openId");
			this.model.openId = this.openId
		},
		methods: {
			// 热线电话
			hotPhoto() {
				uni.makePhoneCall({
					phoneNumber: '400-888-0050'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendSynchroSms({
						params: {
							phone: this.model.phone
						}
					}).then(res => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

			confirmClick() {
				let _this = this
				synchroData(this.model).then(res => {
					uni.$u.toast(res.message);
					_this.model.phone = '';
					_this.model.captcha = '';
					_this.show = false

				})
			},
			cancelClick() {
				this.show = false
			},
			synchronizationClick() {
				this.show = true
			},
			archivalRecordClick() {
				uni.navigateTo({
					url: "/pages-center/ArchivalRecord/index",
				});
			},
			ProblemFeedbackClick() {
				uni.navigateTo({
					url: "/pages-center/ProblemFeedback/index",
				});
			},
			appointmentRecordClick() {
				uni.navigateTo({
					url: "/pages-center/AppointmentRecord/index",
				});
			},
			CollectLink() {
				uni.navigateTo({
					url: "/pages-center/Collect/index",
				});
			},
			wxInfoClick() {
				uni.redirectTo({
					url: "/pages-center/WXinfo/index",
				});
			},
			informationClick() {
				uni.navigateTo({
					url: "/pages-center/Information/index",
				});
			},
			orderClick() {
				uni.navigateTo({
					url: "/pages-shop/OrderInformation/index",
				});
			},
			informationRegistrationClick() {
				uni.navigateTo({
					url: "/pages-center/InformationRegistration/index",
				});
			},
			couponClick() {
				uni.navigateTo({
					url: "/pages-center/Coupon/index",
				});
			},
			PhysicianManagementClick() {
				uni.navigateTo({
					url: "/pages/PhysicianManagement/index",
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>